<template>
	<!-- <view class="content"> -->
	<!-- 
			代码块
				为什么uniapp 会出现代码块?
					各大应用平台，H5，App，IOS，小程序，快应用...
					他们的UI样式，和一些API调用的方式都有很大不同，
					比如说，微信小程序调起微信登录，API和
					APP 调用微信登录的API不一致；
			代码块的写法
				// #ifdef APP
					这部分的内容只在 手机程序显示
				// #endif
		 -->
	<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
	<!-- #ifdef APP-PLUS -->
	<!-- <text>
				这是我的第一个uniapp程序
			</text> -->
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<!-- <text>
				这是我的第一个uniapp程序123
			</text> -->
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<!-- <text>
				这是我的第一个uniapp程序 微信
			</text> -->
	<!-- #endif -->
	<!-- #ifdef MP-ALIPAY -->
	<!-- <text>
				这是我的第一个uniapp程序 支付宝
			</text> -->
	<!-- #endif -->
	<!-- </view> -->
	<div class="content">
		<view id="app">
			<view class="header">
				中部战区_奇酷集中营(9)人在线
			</view>
			<scroll-view id="scroll-view" scroll-y="true" 
			:scroll-top="scrollTop" 
			:scroll-with-animation="true">
				<view class="aside" id="aside">
					<block v-for="(item,index) in list" :key="index">
						<view :class="{
				                item: item.peopleId === peopleId,
				                item_active: item.peopleId !== peopleId
				            }">
							<text>
								{{ item.text }}
							</text>
							<image
								:src="item.peopleId === peopleId ? '../../static/starPeople.jpg':'../../static/lanlan.jpg'"
								alt="">
							</image>
						</view>
					</block>
				</view>
			</scroll-view>
			<view class="footer">
				<view class="content">
					<textarea v-model="value"></textarea>
				</view>
				<view class="btn">
					<button @click="submit()">
						发送(S)
					</button>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	// 创建socket对象
	let webSocket = null;
	export default {
		data() {
			return {
				list: [],
				// 本人的id
				peopleId: 0,
				// 输入框的值
				value: '',
				// 距离顶部的距离
				scrollTop: 300
			}
		},
		// 创建后
		onLoad() {
			// 打开socket
			this.createSocket()
			// 监听打开事件
			this.openSocket();
			// 监听消息
			this.msgSocket();
		},
		methods: {
			// 创建socket链接
			createSocket() {
				webSocket = uni.connectSocket({
					url: 'ws://8.140.19.222:3000'
				})
			},
			// 监听socket打开事件
			openSocket() {
				uni.onSocketOpen(function() {
					console.log('连接成功');
				})
			},
			// 监听socket响应的信息
			msgSocket() {
				let _this = this;
				uni.onSocketMessage(function({
					data
				}) {
					data = JSON.parse(data)
					if (data.code !== 1) {
						_this.list.push({
							text: data.text,
							peopleId: data.peopleId
						}) 
						// #ifdef APP
						uni.vibrateLong({
							// 调用 手机的长振动 成功或者失败
							// 的回调
							complete(com) {
								console.log(com);
							}
						})
						// #endif
						_this.$nextTick(() => {
							// 获取当前页面的元素 
							uni.createSelectorQuery().in(_this).select('#aside')
							.boundingClientRect((res) => {
								// boundingClientRect 触发事件 获取到当前元素的值
								// 390 是sroll-view的高度
								let top = res.height - 390;
								if (top > 0) {
									_this.scrollTop = top;
								}
								// 获取所有的元素的值
							}).exec()
						})
					} else {
						_this.peopleId = data.peopleId
					}
				})
			},
			submit() {
				let _this = this;
				if (this.value.length > 0) {
					uni.sendSocketMessage({
						data: JSON.stringify({
							text: _this.value,
							peopleId: _this.peopleId
						}),
						// 消息发送成功
						success() {
							_this.value = '';
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* #ifndef MP-WEIXIN */
	/* ifndef 除了哪个程序其他的都可以用*/
	* {
		margin: 0;
		padding: 0;
	}

	/* #endif */
	/*
		uniapp 也有新的 css单位 叫做 upx
	*/
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	#app {
		height: 550px;
		width: 100%;
		border-radius: 10px;
		box-sizing: border-box;
		background-color: #f5f5f5;
	}

	.header {
		height: 40px;
		line-height: 45px;
		text-indent: 2em;
		font-size: 20px;
		font-weight: bold;
	}

	.footer {
		height: 120px;
		padding: 10px;
	}

	.footer .content {
		height: 70px;
	}

	.footer .content textarea {
		width: 100%;
		height: 100%;
		resize: none;
		border: 0;
		outline: 0;
		background-color: #f5f5f5;
	}

	.btn {
		text-align: right;
	}

	.btn button {
		width: 90px;
		height: 30px;
		border-radius: 5px;
		background-color: #E9E9E9;
		outline: none;
		border: 0;
		color: #00B87C;
		cursor: pointer;
	}

	scroll-view {

		height: 390px;
	}

	.aside {
		box-sizing: border-box;
		padding: 10px;
	}

	.item,
	.item_active {
		position: relative;
		text-align: right;
		margin-bottom: 15px;
	}

	.aside .item text,
	.aside .item_active text {
		max-width: 80%;
		min-height: 22px;
		display: inline-block;
		padding: 10px;
		border-radius: 5px;
		background-color: #96EB69;
		margin-right: 70px;
		text-align: left;
		/* 字母换行 */
		word-break: break-all;
	}

	.aside .item image,
	.aside .item_active image {
		width: 30px;
		height: 30px;
		border-radius: 4px;
		position: absolute;
		right: 20px;
		top: 0;
	}

	.item_active {
		text-align: left;
	}

	.aside .item_active image {
		width: 30px;
		left: 20px;
	}

	.aside .item_active text {
		background-color: #fff;
		margin-left: 67px;
	}
</style>
